<template>
	<el-dialog title="新增" :visible.sync="dialogFormVisible" :before-close="handleDialogClose">
		<el-form :model="form" :rules="rules" ref="form" v-if="cleardata">
			<el-form-item label="店家名称" :label-width="formLabelWidth" prop="houseName">
				<el-input v-model="form.houseName" style="width: 30%;" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="图片" :label-width="formLabelWidth" prop="housePicture">
				<el-upload class="orders-img_el_upload" :action="upurl" :limit="7" list-type="picture-card"
					:on-change="handleChange" :on-preview="handlePreview" :on-remove="handleRemove"
					:on-success="handleSuccess" :on-error="handleError" :file-list="fileList"
					:class="{ disUoloadSty: noneBtnImg }" multiple ref="upload">
					<span class="orders-img_el_upload_btn" @click.stop="submitUpload">添加图片</span>
				</el-upload>
				<el-dialog title="图片预览" :visible.sync="dialogVisible" :modal="false" top="10vh" class="previewImg">
					<img v-if="dialogImageUrl" width="100%" :src="dialogImageUrl" alt="预览图片" />
				</el-dialog>
			</el-form-item>
			<el-form-item label="状态" :label-width="formLabelWidth" prop="businessStatus">
				<el-select v-model="form.businessStatus" placeholder="请选择" style="width: 30%;">
					<el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item>

			<el-form-item label="营业时间" :label-width="formLabelWidth" prop="businessTime">
				<el-input v-model="form.businessTime" autocomplete="off" style="width: 30%;"></el-input>
			</el-form-item>
			<el-form-item label="联系电话" :label-width="formLabelWidth" prop="housePhone">
				<el-input v-model="form.housePhone" autocomplete="off" style="width: 30%;"></el-input>
			</el-form-item>
			<el-form-item label="价格" :label-width="formLabelWidth" prop="housePrice">
				<el-input v-model="form.housePrice" style="width: 20%;" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="所属地区" :label-width="formLabelWidth">
				<el-cascader v-model="value" :props="{ value: 'regionName', label: 'regionName'}" :options="options"
					clearable>
				</el-cascader>
			</el-form-item>
			<el-form-item label="详细地址" :label-width="formLabelWidth" prop="districtAddress">
				<el-input v-model="form.districtAddress" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="农家乐信息" :label-width="formLabelWidth">
				<div ref="editor"></div>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="cleardata">取 消</el-button>
			<el-button type="primary" @click="submitForm('form')">确 定</el-button>
		</div>
	</el-dialog>
</template>

<script>
	import houseApi from "@/api/farmHouse.js"
	import Editor from "wangeditor"
	export default {
		components: {},
		props: {

		},
		data() {
			return {
				editor: null,
				value: [],
				options: [],
				dialogImageUrl: "",
				dialogVisible: false,
				uploadDisabled: false,
				showBtnImg: true,
				noneBtnImg: false,
				limitCountImg: 7,
				upurl: "/api/file/uploadList/farmHouse",
				fileList: [],
				imgurl: "",
				dialogTableVisible: false,
				dialogFormVisible: false,
				form: {
					businessStatus: "",
					businessTime: "",
					description: "",
					houseRregion: "",
					districtAddress: "",
					houseName: "",
					housePicture: "",
					housePrice: "",
					housePhone: ""
				},
				rules: {
					houseName: [{
						required: true,
						message: "请输入店家名",
						trigger: 'blur'
					}],
					housePrice: [{
						required: true,
						message: "请输入价格",
						trigger: 'blur'
					}],
					districtAddress: [{
						required: true,
						message: "请选择地址",
						trigger: 'change'
					}],
					businessStatus: [{
						required: true,
						message: "请选择状态",
						trigger: 'blur'
					}],
					housePicture: [{
						required: true,
						message: "请上传产品图片",
						trigger: 'change'
					}],
					businessTime: [{
						required: true,
						message: "请输入营业时间",
						trigger: 'change'
					}],
					housePhone: [{
						required: true,
						message: "请输入联系电话",
						trigger: 'change'
					}],
				},
				statusList: [{
						value: "0",
						label: '未营业',
					},
					{
						value: "1",
						label: '营业',
					}
				],
				formLabelWidth: '120px'
			};
		},
		methods: {
			createEditor() {
				this.$nextTick(() => {
					this.editor = new Editor(this.$refs.editor)
					this.editor.config.uploadImgServer = "api/file/editUpload/farmHouse"
					this.editor.config.uploadFileName = "file"
					this.editor.config.uploadVideoServer = 'api/file/editUpload/farmHouse'
					this.editor.config.uploadVideoName = "file"
					this.editor.create()
				})
			},
			handleError(err, file, fileList) {
				this.$message({
					message: "上传失败！",
					type: "success",
				});
				console.log(err);
			},
			handleSuccess(response, file, fileList) {
				if (response.flag === true && response.data) {
					const newImagePath = response.data;
					if (!this.form.housePicture) {
						this.form.housePicture = newImagePath;
					} else {
						if (!this.form.housePicture.includes(newImagePath)) {
							this.form.housePicture += ',' + newImagePath;
						}
					}
			
					this.fileList = fileList;
					if (fileList.length >= 30) {
						this.uploadDisabled = true;
					}
					this.$message({
						message: "上传成功",
						type: "success",
					});
				} else {
					this.$message({
						message: "上传失败",
						type: "error",
					});
				}
			},
			handleChange(file, fileList) {
				this.noneBtnImg = fileList.length >= this.limitCountImg;
				this.fileList = fileList;
			},
			handleRemove(file, fileList) {
				if (fileList && fileList.length > 0) {
					this.updateHousePicture(fileList);
				} else if (fileList.length === 0) {
					this.form.housePicture = '';
					this.fileList = [];
				}
			},
			updateHousePicture(fileList) {
				//使用了 new RegExp(pattern, flags) 来创建了一个正则表达式，其中 g 标志表示全局匹配
				this.form.housePicture = fileList.map(file => file.url).join(',').replace(
					new RegExp(this.$store.state.imgShowRoad2 + '/file/', 'g'), ''
				);
				this.fileList = fileList;
			},
			handlePreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},
			submitUpload() {
				this.$refs.upload.submit();
			},
			async addFarmHouse() {
				let content = this.editor.txt.html();
				const res = await houseApi.AddFarmHouse("/znFarmhouse/addFarmHouse", {
					usinessStatus: this.form.businessStatus,
					businessTime: this.form.businessTime,
					description: content,
					houseRregion: this.value.join(','),
					districtAddress: this.form.districtAddress,
					houseName: this.form.houseName,
					housePicture: this.form.housePicture,
					housePrice: this.form.housePrice,
					housePhone:this.form.housePhone
				});
				if (res.code == 200) {
					this.dialogFormVisible = false;
					this.$message.success("添加成功");
					this.$parent.SearchHouseAll();
					this.editor.destroy();
					this.editor = null;
				}
			},
			cleardata() {
				this.dialogFormVisible = false;
				this.value = [];
				this.$refs.form.resetFields();
				this.editor.destroy();
				this.editor = null;
			},
			handleDialogClose() {
				this.dialogFormVisible = false;
				this.value = [];
				this.$refs.form.resetFields();
				this.editor.destroy();
				this.editor = null;
			},
			submitForm(form) {
				this.$refs[form].validate((valid) => {
					if (valid) {
						this.addFarmHouse();
						this.$refs.form.resetFields();
						this.value = [];
					} else {
						console.log("error submit!!");
						return false;
					}
				});
			},
		},
		created() {}
	};
</script>

<style lang="scss" scoped>
	.disUoloadSty .el-upload--picture-card {
		display: none;
		/* 上传按钮隐藏 */
	}
</style>